<template>
	<view class="tabs">
		<view class="tabs_title">
			<block v-for="(item,index) in tabsData" :key="item.id">
				<view @tap="changeTabsIndex(index)" class="tabs_title_item" :class="activeIndex === index ? 'active' : ''">
					{{item.text}}
				</view>
			</block>
		</view>
		<view class="tabs_content">
			<!-- 接收自定义组件标签内的结构 -->
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		// 组件的属性
		// 严谨的写法
		props:{
			// https://cn.vuejs.org/v2/guide/components-props.html
			// tabs-data 在 JS 中换回驼峰写法
			tabsData:{
				type: Array,
				 // 对象或数组默认值必须从一个工厂函数获取
				default(){
					return []
				}
			}
		},
		// 简写的方式
		// props:[ 'tabsData' ],
		// 组件自身的数据
		data(){
			return {
				activeIndex: 0
			}
		},
		methods:{
			// 组件点击的时间
			changeTabsIndex(index){
				// 更新页面数据
				this.activeIndex = index;
				// 子组件传值给父组件
				//    1. 触发组件的自定义事件
				//    2. 传递参数
				this.$emit('getTabsIndex', { index });
			}
		}
	}
</script>

<style lang="less">
	.tabs{
		&_title{
			display: flex;
			height: 80rpx;
			&_item{
				flex:1;
				display: flex;
				align-items: center;
				justify-content: center;
				&.active{
					font-weight: bold;
					border-bottom: 5rpx solid var(--primaryColor);
				}
			}
		}
	}
</style>

